/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-09 16:34:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-10 17:29:53
 * @FilePath: /three-react/src/pages/CurveGeometry/Line1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'


const state = {}
export default function Page() {

  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])



  function render(scene) {

    const geometry = new THREE.BufferGeometry();

    const curve = new THREE.CatmullRomCurve3([
      new THREE.Vector3(-50, 20, 90),
      new THREE.Vector3(-10, 40, 40),
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(60, -60, 0),
      new THREE.Vector3(70, 0, 80)
    ])

    geometry.setFromPoints(curve.getPoints(5))

//     const pos = geometry.attributes.position;
//     const count = pos.count; //顶点数量
// // 计算每个顶点的颜色值
//   const colorsArr = [];
//   for (let i = 0; i < count; i++) {
//       const percent = i / count; //点索引值相对所有点数量的百分比
//       //根据顶点位置顺序大小设置颜色渐变
//       // 红色分量从0到1变化，蓝色分量从1到0变化
//       colorsArr.push(percent, 0, 1 - percent); //蓝色到红色渐变色
//   }
//   //类型数组创建顶点颜色color数据
//   const colors = new Float32Array(colorsArr);
//   debugger;

    const colors = new Float32Array([
      1, 0, 0, 
      0, 1, 0, 
      0, 0, 1, 
      1, 0, 0, 
      0, 1, 0, 
      0, 0, 1,  
    ])


    // const counts = geometry.attributes.position;
    // debugger

    geometry.attributes.color = new THREE.BufferAttribute(colors, 3)


    const material = new THREE.LineBasicMaterial({
      color: 0x00ffff,
      vertexColors: true
    })

    const line = new THREE.Line(geometry, material)

    scene.add(line);
  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}